<template>
  <div class="jqye">
    <el-breadcrumb separator="/" class="mianbao">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>假期管理</el-breadcrumb-item>
      <el-breadcrumb-item>假期余额</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="demo-date-picker">
      <div class="container">
        <div class="block">
          <el-date-picker v-model="month" type="month" placeholder="选择月" @change='riqi'/>
        </div>
      </div>
      &emsp;
        <el-input
        v-model="bumen"
        class="w-50 m-2"
        placeholder="请选择部门"
        :prefix-icon="Search"
      />
      &emsp;
      <el-input
        v-model="yuangong"
        class="w-50 m-2"
        placeholder="请选择员工"
        :prefix-icon="Search"
        size='200px'
      />
       &emsp;
        <el-button type="primary" @click="chaxun()">查询</el-button>
    </div>
    <div class="title">假期余额</div>
    <div class="daochu">
         <el-button type="primary" @click="exportexcel">导出</el-button>
    </div>

    <el-table :data="tableData" border stripe style="width: 100%" id='out-table'>
    <el-table-column label="序号" type='index' width="80"/>
      <el-table-column label="姓名" prop='name' />
      <el-table-column label="员工编号" prop='bianhao'/>
      <el-table-column label="部门" prop='bumen'/>
      <el-table-column label="事假" prop='shijia'/>
      <el-table-column label="年假" prop='nianjia'/>
      <el-table-column label="病假" prop='bingjia'/>
      <el-table-column label="婚假" prop='hunjia'/>
      <el-table-column label="产假" prop='chanjia'/>
      <el-table-column label="其他假期" prop='qita'/>
      <el-table-column label="总余额" prop='zongyue'/>
    <el-table-column label="操作" >
        <template #default="scope">
            <el-button @click="dalatejq(scope.row.id)" type="danger">详情</el-button>
        </template>
    </el-table-column>
  </el-table>
    
  </div>
</template>

<script setup>
import {Holiday} from '@/api/ning/ning'
import { ref ,onMounted} from "vue";
import { Search } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'

import * as XLSX from 'xlsx'
import fs from 'file-saver'

var $router=useRouter()

var month = ref("");
var bumen = ref("");
var yuangong = ref("");
var tableData=ref([])

var exportexcel = ()=>{
  excelExport( document.querySelector('#out-table'),'myexcel' )
}
var riqi=async()=>{
    var res=await Holiday({ date_like:month.value } )
    console.log(res);
    tableData.value=res.data
}
var chaxun= async ()=>{
  var res=await Holiday({ name_like:yuangong.value,bumen_like:bumen.value } )
    console.log(res);
    tableData.value=res.data
}
onMounted(async()=>{
    var res=await Holiday()
    console.log(res);
    tableData.value=res.data
    
})
var dalatejq=(id)=>{
    $router.push({path:'/index/limit',query:{id}});
}

var excelExport = (table, filename) => {
  // workbook,
  const wb = XLSX.utils.table_to_book(table)
  console.log(wb);

  /* Export to file (start a download) */
  const defaultCellStyle = {
    font: { name: 'Verdana', sz: 13, color: 'FF00FF88' },
    fill: { fgColor: { rgb: 'FFFFAA00' } },
  }
  const wopts = {
    bookType: 'xlsx',
    bookSST: false,
    type: 'binary',
    cellStyle: true,
    defaultCellStyle: defaultCellStyle,
    showGridLines: false,
  }
  const wbout = XLSX.write(wb, wopts)
  const blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' })
  fs.saveAs(blob, filename+'.xlsx')
}
var s2ab = (s) => {
  if (typeof ArrayBuffer !== 'undefined') {
    const buf = new ArrayBuffer(s.length);
    const view = new Uint8Array(buf);
    for (let i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
    return buf;
  } else {
    const buf = new Array(s.length);
    for (let i = 0; i !== s.length; ++i) buf[i] = s.charCodeAt(i) & 0xff;
    return buf;
  }
}
</script>

<style scoped lang='scss'>
.jqye{
    width: 100%;
}
.mianbao {
  margin-bottom: 20px;
}
.demo-date-picker{
    display: flex;
    padding: 6px;
    margin: 10px 0;
    background-color: white;
    padding: 20px;
}
.title{
    font-size: 16px;
    font-weight: 600;
    padding-bottom: 10px;
    border-bottom:1px solid #ccc;
    background-color: white;
}
.daochu{
    width: 100%;
    padding:15px 0;
}
</style>